<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" ><![endif]-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Create Custom Link</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript">
function add(useHref)
{
	try
	{
		var link = document.getElementById('link').value;
		var obj = JSON.parse(link.substring(link.indexOf(',') + 1));

		if (useHref)
		{
			obj.actions.push({open: document.getElementById('href').value});
		}
		else
		{
			var action = {};
			var selector = {};
			var cells = document.getElementById('cells').value;

			if (cells.length > 0)
			{
				selector['cells'] = cells.split(' ');
			}

			var tags = document.getElementById('tags').value;

			if (tags == '*')
			{
				selector['tags'] = [''];
			}
			else if (tags.length > 0)
			{
				selector['tags'] = tags.split(' ');
			}

			action[document.getElementById('action').value] = selector;
			obj.actions.push(action);
		}

		document.getElementById('link').value = 'data:action/json,' + JSON.stringify(obj);
	}
	catch (e)
	{
		alert(e);
	}
}

function clearInput()
{
	document.getElementById('cells').value = '';
	document.getElementById('tags').value = '';
	document.getElementById('href').value = '';
}

function resetLink()
{
	document.getElementById('link').value = 'data:action/json,{"actions":[]}';
}

function copyLink()
{
	var link = document.getElementById('link');
	link.removeAttribute('disabled');
	link.focus();
	link.select();
	document.execCommand('copy');
	link.setAttribute('disabled', 'true');
	alert('Copied to Clipbaord');
}
</script>
</head>
<body onload="document.getElementById('cells').focus();">
  <h2>Create Custom Link</h2>
  1. Action: <select id="action">
    <option value="toggle" selected>Toggle</option>
    <option value="show">Show</option>
    <option value="hide">Hide</option>
    <option value="highlight">Highlight</option>
    <option value="select">Select</option>
    <option value="scroll">Scroll</option>
  </select>
  <br><br>
  2. Cells/Layers: <input type="text" size="60" id="cells" placeholder="1 2 3"></input> (Space-separated list of cell or layer IDs, * for all)
  <br><br>
  3. Tags: <input type="text" size="60" id="tags" placeholder="water pipes"></input> (Space-separated list of tags, * for all)
  <br><br>
  <button onclick="add();return false;" style="font-weight:bold;">4. Click Here to Add!</button>
  &nbsp;<button onclick="clearInput();return false;">5. Click Here to Reset Input</button>
  <br><br>
  <button onclick="add(true);return false;" style="font-weight:bold;">Or Click Here to Add Link:</button>
  &nbsp;<input type="text" size="60" id="href" placeholder="data:page/id,d77c2f53-a0fe-16b8-c644-547af6ee0c87"></input>
  (Custom link or hyperlink)
  <br><br>
  Custom Link:
  <br>
  <textarea rows="6" cols="100" id="link" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off">
data:action/json,{"actions":[]}
</textarea>
<br>
<button onclick="copyLink();return false;"><b>Copy to Clipboard</b></button>
<button onclick="resetLink();return false;">Click Here to Reset Link</button>
<br><br>
<a href="https://desk.draw.io/solution/articles/16000080137" target="_blank">Help</a>
</body>
</html>
